<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h2>Single spaces</h2>
    <p>A B</p>
    <p>A B</p>
    <p><span>A</span> B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;</span><span></span> B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x20;</span>B</p>
    <p><span>A </span>B</p>
    <h2>Consecutive whitespace</h2>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x20;</span>B<span style="white-space: pre-wrap">&#x20;&#x20;&#x20;</span>C</p>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x20;</span>B<span style="white-space: pre-wrap">&#x20;&#x20;&#x20;</span>C</p>
    <p><span>A<span style="white-space: pre-wrap">&#x20;</span></span> B</p>
    <p><span>A </span><span style="white-space: pre-wrap">&#x20;&#x20;</span>B</p>
    <p><span>A<span style="white-space: pre-wrap">&#x20;&#x20;</span></span> B</p>
    <p><span>A<span style="white-space: pre-wrap">&#x20;&#x20;</span></span><span style="white-space: pre-wrap">&#x20;&#x20;</span>B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x20;</span><span></span><span style="white-space: pre-wrap">&#x20;&#x20;</span>B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x20;&#x20;</span>B</p>
    <h2>Leading whitespace</h2>
    <p><span style="white-space: pre-wrap">&#x20;</span>A</p>
    <p><span><span style="white-space: pre-wrap">&#x20;</span></span>A</p>
    <p><span></span><span style="white-space: pre-wrap">&#x20;</span>A</p>
    <h2>Trailing whitespace</h2>
    <p>A<span style="white-space: pre-wrap">&#x20;</span></p>
    <p><span>A<span style="white-space: pre-wrap">&#x20;</span></span></p>
    <p><span>A<span style="white-space: pre-wrap">&#x20;</span></span><span></span></p>
    <h2>Tabs</h2>
    <p>A<span style="white-space: pre-wrap">&#x9;</span>B</p>
    <p>A<span style="white-space: pre-wrap">&#x9;</span>B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x9;&#x20;</span>B</p>
    <h2>Newlines</h2>
    <p>A<br>B</p>
    <p>A<br>B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;</span><br><span style="white-space: pre-wrap">&#x20;</span>B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;</span><br><span style="white-space: pre-wrap">&#x20;</span>B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;</span><span><br></span><span style="white-space: pre-wrap">&#x20;</span>B</p>
    <h2>With default ignorables</h2>
    <p>A<span style="white-space: pre-wrap">&#x20;</span>‍ B</p>
    <p>A<span style="white-space: pre-wrap">&#x20;&#x20;</span>‍<span style="white-space: pre-wrap">&#x20;&#x20;</span>B</p>
    <h2>Everything</h2>
    <p><span><span style="white-space: pre-wrap">&#x20;&#x20;</span>A<span style="white-space: pre-wrap">&#x20;</span></span><br><span style="white-space: pre-wrap">&#x9;</span>B<span style="white-space: pre-wrap">&#x20;</span><span></span></p>
    <h2>Special</h2>
    <textarea>A  B</textarea>
    <pre>A  B</pre>
  </body>
</html>
